<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="recommender">推荐人列表</el-menu-item>
      <el-menu-item index="record">推荐记录</el-menu-item>
    </el-menu>


    <!--数据列表  推荐人列表-->
    <div class="table-container" v-if="tab == 'recommender'">
      <div style="margin-top: 40px">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery" size="mini" label-width="80px">
          <el-form-item label="推荐人：">
            <el-input v-model="listQuery.keywords"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>

          <el-table
            v-loading="listLoading"
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
                    label="推荐类型"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.introducerType | fifintroducerType}}
              </template>
            </el-table-column>
            <el-table-column  label="推荐人" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.introducerName}}
              </template>
            </el-table-column>
            <el-table-column
                    label="手机号"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.introducerMobile}}
              </template>
            </el-table-column>
          <el-table-column
                  label="身份证"
                  width="150"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.idNumber}}
            </template>
          </el-table-column>
            <el-table-column
                    label="银行名称"
                    width="150"
                    align="center">
                <template slot-scope="scope">
                  {{scope.row.bankName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="银行卡号"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.bankNumber}}
              </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.actualSaleNum}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="分成比例"
              width="100">
              <template slot-scope="scope">
                {{scope.row.commissionRate}}%
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="成交次数"
                    width="100">
              <template slot-scope="scope">
                {{scope.row.orderCount}}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderGoodsNum"
              label="成交吨数"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
                    prop="commissionAmount"
                    label="佣金"
                    width="100"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="100"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createUserName"
                    label="创建人"
                    width="100"
                    align="center">
            </el-table-column>

            <el-table-column
              width="150"
              fixed="right"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="showForm1(scope.row)">修改
                </el-button>
                <el-button
                        type="text"
                        size="mini"
                        @click="showDialog2(scope.row)">推荐记录
                </el-button>
                <el-button
                        type="text"
                        size="mini"
                        @click="toSaleDeliverDetails(scope.row)">佣金
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="count">
            </el-pagination>
          </div>
      </div>

    <!--数据列表  推荐记录-->
    <div class="table-container" v-if="tab == 'record'">
      <!--搜索-->
      <div>
        <el-form :inline="true" :model="listQuery4" size="mini" label-width="80px">
          <el-form-item label="推荐人：">
            <el-input v-model="listQuery4.introducerName"></el-input>
          </el-form-item>
          <el-form-item label="客户编号：">
            <el-input v-model="listQuery4.customerNumber"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="handleSearchList4()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
              v-loading="listLoading4"
              :data="tableData4"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column
                label="推荐人"
                align="center">
          <template slot-scope="scope">
            {{scope.row.introducerName}}
          </template>
        </el-table-column>
        <el-table-column  label="客户编号" width="300" align="center">
          <template slot-scope="scope">
            <span>
                {{scope.row.customerNumber }}
              </span>
            <!--是否有权限-->
            <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column
                label="推荐时间"
                align="center">
          <template slot-scope="scope">
            {{scope.row.startTime}}
          </template>
        </el-table-column>
        <el-table-column
                label="分成比例"
                align="center">
          <template slot-scope="scope">
            {{scope.row.commissionRate}}%
          </template>
        </el-table-column>
        <el-table-column
                label="分成时长"
                align="center">
          <template slot-scope="scope">
            {{scope.row.commissionMonths | fifcommissionMonths}}
          </template>
        </el-table-column>
        <el-table-column
                label="创建时间"
                align="center">
          <template slot-scope="scope">
            {{scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column
                label="创建人"
                align="center">
          <template slot-scope="scope">
            {{scope.row.createUserName }}
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
                align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="mini"
                    @click="delIntroducer(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange4"
                @current-change="handleCurrentChange4"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery4.pageNum"
                :page-size="listQuery4.pageSize"
                :page-sizes="[10,15,20]"
                :total="count4">
        </el-pagination>
      </div>
    </div>


    <!--新增推荐人-->
    <el-dialog
            title="编辑推荐人"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible1"
            width="600px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="120px" ref="form1" :model="form1" :rules="rules1">
            <el-form-item label="推荐类型：" prop="introducerType">
              <el-radio-group v-model="form1.introducerType" @change="changeIntroducerType">
                <el-radio :label="1">外部</el-radio>
                <el-radio :label="2">内部</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐人：" prop="introducerName" v-if="form1.introducerType == 2">
              <el-select v-model="form1.introducerName" filterable placeholder="请选择" value-key="realName" @change="handleSelectUserName">
                <el-option
                        v-for="item in userOptionList"
                        :key="item.userId"
                        :label="item.realName"
                        :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="推荐人：" prop="introducerName" v-if="form1.introducerType == 1">
              <el-input v-model="form1.introducerName" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="introducerMobile">
              <el-input v-model="form1.introducerMobile"  style="width:150px"></el-input>
            </el-form-item>
<!--          <el-form-item label="推荐时间：" prop="startTime">-->
<!--            <el-date-picker-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    v-model="form1.startTime"-->
<!--                    type="date"-->
<!--                    placeholder="选择日期">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
            <el-form-item label="身份证号：">
              <el-input v-model="form1.idNumber"  style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="银行名称：">
              <el-input v-model="form1.bankName"  style="width:250px"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号：">
              <el-input v-model="form1.bankNumber"  style="width:250px"></el-input>
            </el-form-item>
            <el-form-item label="分成比例：" prop="commissionRate">
              <el-input v-model="form1.commissionRate" style="width:120px"></el-input> <span>%</span>
            </el-form-item>
          <el-form-item label="分成时长：" prop="commissionMonths">
            <el-radio-group v-model="form1.commissionMonths">
              <el-radio :label="3">三个月</el-radio>
              <el-radio :label="6">六个月</el-radio>
              <el-radio :label="12">十二个月</el-radio>
              <el-radio :label="0">长久</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input v-model="form1.introducerRemark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea"  style="width:250px"></el-input>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="handleClose1" size="small">取 消</el-button>
          <el-button type="primary" @click="handleConfirm1" :loading="btnLoading1" size="small">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <!--推荐记录-->
    <el-dialog
            title="推荐记录"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible2"
            width="900px">
      <div style="max-height: 500px;overflow: auto">
        <el-table
                v-loading="dialogLoading"
                :data="dialogList"
                border
                style="width: 98%; margin-top: 20px">
          <el-table-column
                  label="推荐人"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.introducerName}}
            </template>
          </el-table-column>
          <el-table-column  label="客户名称" width="250" align="center">
            <template slot-scope="scope">
              {{scope.row.customerName}}
            </template>
          </el-table-column>
          <el-table-column
                  width="150"
                  label="推荐时间"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.startTime}}
            </template>
          </el-table-column>
          <el-table-column
                  label="分成比例"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.commissionRate}}%
            </template>
          </el-table-column>
          <el-table-column
                  label="分成时长"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.commissionMonths | fifcommissionMonths}}
            </template>
          </el-table-column>
          <el-table-column
                  label="创建时间"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column
                  label="创建人"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.createUserName }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChangeDialog"
                  @current-change="handleCurrentChangeDialog"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="listQueryDialog.pageNum"
                  :page-size="listQueryDialog.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="countDialog">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    import axios from 'axios'
    import {weekDataList,introducerList,editIntroducer,getUserOption,customerIntroducerList,delCustomerIntroducer} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    const defaultListQuery={
      keywords:null,
      pageNum: 1,
      pageSize: 10,
    };
    const defaultListQuery3={
      customerName:null,
      introducerName:null,
      pageNum: 1,
      pageSize: 10,
      customerNumber:''
    };
    const defaultListQuery1={
      pageNum: 1,
      pageSize: 10,
    };
    const defaultForm1={
      introducerId:'',
      introducerName:'',
      introducerMobile:'',
      introducerType:'',
      idNumber:'',
      bankName :'',
      bankNumber :'',
      commissionRate  :'',
      commissionMonths  :'',
      introducerRemark:'',
    };


    export default {
      name: "index",
      data(){
        const isvalidateContactBeginNum = (rule, value, callback) => {
            let contactEndNum = this.form1.contactEndNum !== '' ? parseFloat(this.form1.contactEndNum) :'';
            let contactBeginNum = this.form1.contactBeginNum !== '' ? parseFloat(this.form1.contactBeginNum) : '';
            console.log("this.form1.contactBeginNum", this.form1.contactEndNum)
            console.log("this.form1.contactBeginNum", this.form1.contactEndNum !== '')
            console.log(contactBeginNum)
            if(contactEndNum === ''|| contactBeginNum === ''){
               callback(new Error('开始与结束都必须填写'))
            }else if(contactEndNum < contactBeginNum){
                callback(new Error('开始数量应小于结束数量'))
            }else {
              callback()
            }
          };
          return {
              tab:'recommender',
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData:[],
              count: 0,
              listLoading: false,
              dialogVisible1:false,
              form1:JSON.parse(JSON.stringify(defaultForm1)),
              btnLoading1:false,
              rules1:{
                introducerType:[{required: true, message: '请选择推荐类型', trigger: 'change'},],
                introducerName:[{required: true, message: '请选择推荐人', trigger: 'change'},],
                introducerMobile:[{required: true, message: '请输入推荐人手机号', trigger: 'blur'},],
                startTime:[{required: true, message: '请选择推荐时间', trigger: 'change'},],
                commissionRate:[{required: true, message: '请输入分成比例', trigger: 'blur'},],
                commissionMonths:[{required: true, message: '请选择分成时长', trigger: 'change'},],
              },

              listLoading4:false,
              tableData4:[],
              listQuery4:JSON.parse(JSON.stringify(defaultListQuery3)),
              count4:0,

             dialogVisible2:false,
              listQueryDialog:{
                userId:null,
                pageNum: 1,
                pageSize: 10,
              },
            dialogLoading:false,
            dialogList:[],
            countDialog:0,
            userOptionList:[]

          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
      },
      created() {
        this.getList();
        this.getList4();
        this.getUserOptionList();
      },
      filters: {
        fifcommissionMonths(val){
          if(val == 0){
            return '长久'
          }else{
            return val + '个月'
          }
        },
        fifintroducerType(val){
            if(val == 1){
              return '外部'
            }else if(val == 2){
              return '内部'
            }
        },
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        fifType(val){
          if(val == 'senior_staff'){
            return '老员工'
          }else if(val == 'formal_staff'){
            return '正式员工'
          }else if(val == 'new_staff'){
            return '试用期员工'
          }
        },
        fiftransactionType(val){
          if(val == 'BANK_PAY'){
            return '银行汇款'
          }else if(val == 'COD_PAY'){
            return '货到付款'
          }else if(val == 'DEPOSIT_PAY'){
            return '定金'
          }else{
            return '其它'
          }
        },
      },
      methods:{
        //去发货明细列表
        toSaleDeliverDetails(item){
          let routeData = this.$router.resolve({name:'saleDeliverDetails',query:{introducerName:item.introducerName}});
          window.open(routeData.href);
        },
        //切换推荐类型
        changeIntroducerType(){
          this.form1.introducerName = '';
          this.form1.introducerMobile = '';
        },
        //获取员工下拉选项
        getUserOptionList(){
          getUserOption().then((res)=>{
            this.userOptionList = res;
          })
        },

        //选择员工名称
        handleSelectUserName(item){
          this.form1.introducerName = item.realName;
          this.form1.introducerMobile = item.mobile;
        },
        //显示每个人的推荐记录
        showDialog2(item){
          this.dialogVisible2 = true;
          this.listQueryDialog.introducerId = item.introducerId;
          this.listQueryDialog.pageNum = 1;
          this.listQueryDialog.userId = item.userId;
          this.getListDialog();
        },

        handleSizeChangeDialog(val){
          this.listQueryDialog.pageNum = 1;
          this.listQueryDialog.pageSize = val;
          this.getListDialog();
        },
        handleCurrentChangeDialog(val){
          this.listQueryDialog.pageNum = val;
          this.getListDialog();
        },

        getListDialog(){
          let listQuery = {};
          listQuery.pageNum = this.listQueryDialog.pageNum;
          listQuery.pageSize = this.listQueryDialog.pageSize;
          listQuery.introducerId = this.listQueryDialog.introducerId;
          this.dialogLoading   = true;
          customerIntroducerList(listQuery).then((res)=>{
            this.dialogList = res.list;
            this.countDialog = res.count;
            this.dialogLoading = false;
          }).catch(()=>{
            this.dialogLoading = false;
          })
        },
        handleSearchList4(){
          this.listQuery4.pageNum = 1;
          this.getList4();
        },
        handleSizeChange4(val){
          this.listQuery4.pageNum = 1;
          this.listQuery4.pageSize = val;
          this.getList4();
        },
        handleCurrentChange4(val){
          this.listQuery4.pageNum = val;
          this.getList4();
        },

        //删除推荐记录
        delIntroducer(item){
          this.$confirm('确定删除此条记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delCustomerIntroducer({ciId:item.ciId}).then(()=>{
              this.getList4();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        //获取推荐记录
        getList4(){
          let listQuery = {};
          listQuery.pageNum = this.listQuery4.pageNum;
          listQuery.pageSize = this.listQuery4.pageSize;
          listQuery.customerNumber = this.listQuery4.customerNumber;
          listQuery.introducerName = this.listQuery4.introducerName;
          this.listLoading4 = true;
          customerIntroducerList(listQuery).then((res)=>{
            this.tableData4 = res.list;
            this.count4 = res.count;
            this.listLoading4 = false;
          }).catch(()=>{
            this.listLoading4 = false;
          })
        },


        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },
        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取推荐人列表
        getList(){
          let listQuery = {};
            listQuery.pageNum = this.listQuery.pageNum;
            listQuery.pageSize = this.listQuery.pageSize;
            listQuery.keywords = this.listQuery.keywords;
            this.listLoading = true;
          introducerList(listQuery).then((res)=>{
              this.tableData = res.list;
              this.count = res.count;
              this.listLoading = false;
          }).catch(()=>{
              this.listLoading = false;
          })
        },


        /**
         * 切换选择状态
         */
        handleSelect(key, keyPath){
             this.tab = key
             if(this.tab == 'recommender'){
               this.handleSearchList();
             }else{
               this.handleSearchList4();
             }
        },


        //显示修改推荐人
        showForm1(item){
            this.dialogVisible1 = true;
            this.form1.introducerId = item.introducerId;
            this.form1.introducerName = item.introducerName;
            this.form1.introducerMobile = item.introducerMobile;
            this.form1.introducerType = item.introducerType;
            this.form1.idNumber = item.idNumber;
            this.form1.bankName = item.bankName;
            this.form1.bankNumber = item.bankNumber;
            this.form1.commissionRate = item.commissionRate;
            this.form1.commissionMonths = item.commissionMonths;
            this.form1.introducerRemark = item.introducerRemark;
        },

        //关闭修改推荐人
        handleClose1(){
          this.dialogVisible1 = false;
          this.$refs.form1.clearValidate();
        },
        //提交修改推荐人
        handleConfirm1(){
          this.$refs.form1.validate((valid) => {
            if (valid) {
                this.btnLoading1 = true;
              editIntroducer(this.form1).then(response => {
                this.btnLoading1 = false;
                this.handleClose1();
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                });
                this.getList();
              }).catch(()=>{
                this.btnLoading1 = false;
              })
            }
          })
        },
      },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
